import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', () => {
  const theme = ref(localStorage.getItem('theme'));
  const themeList = ['default', 'pink', 'yellow', 'purple', 'green', 'gray'];
  function changeTheme(themeStr = theme.value) {
    // 先移除所有主题
    themeList.forEach((item) => {
      document.documentElement.classList.remove(item);
    });
    // 如果是default 恢复默认主题，否则设置相应主题
    if (themeStr === 'default') {
      localStorage.removeItem('theme');
      return;
    }
    theme.value = themeStr;
    document.documentElement.classList.add(themeStr);
    localStorage.setItem('theme', themeStr);
  }

  const isDark = ref(localStorage.getItem('isDark') || '0');
  function changeDrak(dark = isDark.value) {
    if (dark === '1') {
      document.documentElement.classList.add('dark');
      localStorage.setItem('isDark', '1');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('isDark', '0');
    }
    isDark.value = dark;
  }

  return { theme, changeTheme, changeDrak, isDark };
});
